<template>
	<view ref="container" class="goodscollection">
		<view class="my-order">
			<view class="nav acea-row row-around">
				<view class="item" :class="type == 0 ? 'on' : ''" @click="changeType(0)">
					<view>未兑奖</view>
				</view>
				<view class="item" :class="type == 1 ? 'on' : ''" @click="changeType(1)">
					<view>已兑奖</view>
				</view>
				<view class="item" :class="type == 2 ? 'on' : ''" @click="changeType(2)">
					<view>已过期</view>
				</view>
			</view>
		</view>
		<view class="collectionGoods">
			<view class="item acea-row row-between-wrapper" v-for="(item, index) in collectProductList" :key="index">
				<view class="pictrue">
					<image :src="item.prizeImage" />
				</view>
				<view class="text acea-row row-column-between">
					<view class="infor line1">{{item.title}}</view>
					<view class="acea-row row-between-wrapper">
						<view class="money font-color-red">有效期</view>
						<view class="money font-color-red">{{ formatTimeThree(item.createTime) }}</view>
						<text @tap.stop="cashAprize(item.id,item.prizeImage,item.createTime,item.title)" class="cashAprize__button" v-if="item.prizeStatus == 0">兑奖</text>
					</view>
				</view>
				
				<view class="watermark__view" v-if="item.prizeStatus == 1">
					已兑奖
				</view>
				
				<view class="watermark__view" v-if="item.prizeStatus == 2">
					已过期
				</view>
			</view>
		</view>
		<Loading :loaded="loadend" :loading="loading"></Loading>
		<view class="noCommodity" v-if="collectProductList.length < 1 && page > 1">
			<view class="noPictrue">
				<image src="https://h5.ylsp.vip/file/static/record-bg.png" class="image" />
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getWinThePrizeRecord
	} from "@/api/user";
	import Loading from "@/components/Loading";
	export default {
		name: "GoodsCollection",
		components: {
			Loading
		},
		props: {},
		data: function() {
			return {
				page: 1,
				limit: 20,
				type: 0,
				collectProductList: [],
				loadTitle: "",
				loading: false,
				loadend: false
			};
		},
		onShow: function() {
			this.get_user_collect_product();
		},
		onHide: function() {
			this.collectProductList = []
			this.page = 1
			this.limit = 20
			this.loadend = false
			this.loading = false
		},
		onReachBottom() {
			!this.loading && this.get_user_collect_product();
		},
		methods: {
			changeType(id) {
				this.type = id
				this.collectProductList = [],
				this.loading = false,
				this.loadend = false
				this.page = 0
				this.limit = 20
				this.get_user_collect_product()
			},
			formatTimeThree(time) {
			  time = time
			  const d = new Date(time)
			  return (
			    d.getFullYear() + '年' +
			    (d.getMonth() + 1) +
			    '月' +
			    d.getDate() +
			    '日'
			  )
			},
			get_user_collect_product: function() {
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				getWinThePrizeRecord(that.page, that.limit, that.type).then(res => {
					console.log(res.data)
					that.loading = false;
					that.collectProductList.push.apply(that.collectProductList, res.data.prizeRecordList);
					that.loadend = res.data.prizeRecordList.length < that.limit;
					that.page = that.page + 1;
				});
			},
			cashAprize(id,images,time,title) {
				this.$yrouter.push({
					path: "/pagesB/view/cashAprize/index",
					query: {
						id: id,
						images: images,
						time: time,
						title: title
					}
				});
			}

		}
	};
</script>
<style lang="less">
	.collectionGoods {
		padding-top: 100rpx;
		background: none;

		.item {
			position: relative;
			background-color: #FFFFFF;
			margin-left: 0;
			padding-left: 30rpx;
			
			.watermark__view{
				position: absolute;
				top: 50rpx;
				right: 50rpx;
				height: 100rpx;
				width: 100rpx;
				border-radius: 100%;
				color: #999999;
				border: #999999 solid 1rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 26rpx;
			}
		}
	}

	.cashAprize__button {
		background-color: #ff424c;
		color: #FFFFFF;
		padding: 10rpx 30rpx;
		font-size: 26rpx;
		border-radius: 12rpx;
	}

	.my-order .nav .item {
		position: relative;
	}

	.my-order .nav .item.on::after {
		height: 7rpx;
		width: 50rpx;
		border-radius: 5rpx;
		background: -webkit-linear-gradient(to left, #ff424c, #faa159);
		/* Safari 5.1-6.0 */
		background: -o-linear-gradient(to left, #ff424c, #faa159);
		/* Opera 11.1-12.0 */
		background: -moz-linear-gradient(to left, #ff424c, #faa159);
		/* Firefox 3.6-15 */
		background: linear-gradient(to left, #ff424c, #faa159);
		/* 标准语法 */
		position: absolute;
		content: '';
		bottom: -35px;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
